<template xmlns="">
  <div class="background">
    <titleComponent :originName="'headquarters'" :title="'服务区数字化管理平台'"></titleComponent>
    <div class="content">
      <div class="content_info">
        <div class="yz-select-server">
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item, index) in abItems" @click="abClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{ item.name }}</div>
              <div v-else class="yz-box-item-text">{{ item.name }}</div>
            </div>
          </div>
          <div class="yz-box-items">

          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'服务区基础信息'" />
          <div class="yz-content-bg">
            <div class="yz-table">
              <div class="yz-tr bg-none">
                <div class="yz-td">
                  <div class="yz-td-label">所属高速</div>
                  <div class="yz-td-text">{{ fwqInfo.ssgs }}</div>
                </div>
                <div class="yz-td">
                  <div class="yz-td-label">经营类型</div>
                  <div class="yz-td-text">{{ fwqInfo.jylx }}</div>
                </div>
              </div>
              <div class="yz-tr">
                <div class="yz-td">
                  <div class="yz-td-label">编制人数</div>
                  <div class="yz-td-text">{{ fwqInfo.bzrs }}</div>
                </div>
                <div class="yz-td">
                  <div class="yz-td-label">占地面积</div>
                  <div class="yz-td-text">{{ fwqInfo.zdmj }}</div>
                </div>
              </div>
              <div class="yz-tr bg-none">
                <div class="yz-td">
                  <div class="yz-td-label">路段</div>
                  <div class="yz-td-text">{{ fwqInfo.ld }}</div>
                </div>
                <div class="yz-td">
                  <div class="yz-td-label">建筑面积</div>
                  <div class="yz-td-text">{{ fwqInfo.jzmj }}</div>
                </div>
              </div>
              <div class="yz-tr">
                <div class="yz-td">
                  <div class="yz-td-label">桩号</div>
                  <div class="yz-td-text">{{ fwqInfo.zh }}</div>
                </div>
                <div class="yz-td">
                  <div class="yz-td-label">经营面积</div>
                  <div class="yz-td-text">{{ fwqInfo.jymj }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'日检不合格任务'" />
          <div class="yz-content-bg">
            <div class="yz-sm">
              <div class="yz-sm-title">总任务：{{noncfmTask.zrw}}</div>
              <div class="yz-sm-md">
                <div class="yz-sm-md3">
                  <div class="yz-sm-md3-num">{{noncfmTask.ywc}}</div>
                  <div class="yz-sm-md3-text">已完成</div>
                  <div class="yz-sm-md3-icon1"></div>
                </div>
                <div class="yz-sm-md3">
                  <div class="yz-sm-md3-num">{{noncfmTask.wwc}}</div>
                  <div class="yz-sm-md3-text">未完成</div>
                  <div class="yz-sm-md3-icon2"></div>
                </div>
                <div class="yz-sm-md3">
                  <div class="yz-sm-md3-num">{{noncfmTask.bhg}}</div>
                  <div class="yz-sm-md3-text">不合格</div>
                  <div class="yz-sm-md3-icon3"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'停车位占用'" />
          <div class="yz-content-bg">
            <div class="yz-dd">
              <div class="yz-dd-left">
                <div class="yz-dd-box">
                  <div class="yy-dd-text" :style="{color: zcwColor[0]}">{{ zcwKyValues[0] }}<span>可用</span></div>
                  <div class="yy-dd-text-sm">小车位：{{ zcwValues[0] }}个</div>
                </div>
                <div class="yz-dd-box">
                  <div class="yy-dd-text" :style="{color: zcwColor[1]}">{{ zcwKyValues[1] }}<span>可用</span></div>
                  <div class="yy-dd-text-sm">大车位：{{ zcwValues[1] }}个</div>
                </div>
              </div>
              <div class="yz-dd-right">
                <div class="yz-dd-box">
                  <div class="yy-dd-text" :style="{color: zcwColor[2]}">{{ zcwKyValues[2] }}<span>可用</span></div>
                  <div class="yy-dd-text-sm">充电位：{{ zcwValues[2] }}个</div>
                </div>
                <div class="yz-dd-box">
                  <div class="yy-dd-text" :style="{color: zcwColor[3]}">{{ zcwKyValues[3] }}<span>可用</span></div>
                  <div class="yy-dd-text-sm">危化品：{{ zcwValues[3] }}个</div>
                </div>
              </div>
              <div class="yz-dd-content">
                <div class="yz-dd-chart" ref="zcwRef"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="content_map">
        <div class="yz-map-header">
          <div class="car_flow numbg">
            <div class="car_flow_text">{{ klOptions.carFlowText }}</div>
            <div class="car_flow_num">
              <div class="perNum" v-for="(item,index) in klOptions.klNum">
                <div v-if="isNumeric(item)">
                  <!-- 有背景图，然后把数字拆分  -->
                  <countTo :startVal='0' :endVal='item||0' :duration='5000'></countTo>
                </div>
                <div v-else>
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="car_flow_unit">人</div>
          </div>
        </div>
        <!-- 地图数据 -->
        <Map-traffic :data="mapData.data" :showLabel="mapData.showLabel" :parenHandler="parenHandler"></Map-traffic>
      </div>
      <div class="content_info">
        <div style="height: 53px"></div>
        <div class="content_info_item">
          <contentTitle :title="'服务功能'" />
          <div class="yz-content-bg">
            <div class="yz-ff-lis">
              <div class="yz-ff-li" v-for="(item,index) in wwgnList">
                <div class="yz-ff-li-icon">
                  <el-image v-if="item.active" :src="item.src"></el-image>
                  <el-image v-else :src="item.src2"></el-image>
                </div>
                <div class="yz-ff-li-text" v-if="item.active"><span>{{item.text}}</span></div>
                <div class="yz-ff-li-text-no" v-else><span>{{item.text}}</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'厕所监控'" />
          <div class="yz-content-bg">
            <div class="yz-cc">
              <div class="yz-cc-md6">
                <div class="yz-cc-md6-bg">
                  <div class="yz-cc-grid">
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p1">
                        女厕
                      </div>
                    </div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p2">
                        <div class="yz-cc-md6-p2-text">{{toiletMonitor.women_wd}}℃</div>
                        <div class="yz-cc-md6-p2-text2">温度</div>
                      </div>
                    </div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p2">
                        <div class="yz-cc-md6-p2-text">{{toiletMonitor.women_sd}}%</div>
                        <div class="yz-cc-md6-p2-text2">湿度</div>
                      </div>
                    </div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p2">
                        <div class="yz-cc-md6-p2-text">{{toiletMonitor.women_cwnd}}ppm</div>
                        <div class="yz-cc-md6-p2-text2">臭味浓度</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="yz-cc-md6">
                <div class="yz-cc-md6-bg yz-cc-md6-bg2">
                  <div class="yz-cc-grid">
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p1">
                        男厕
                      </div>
                    </div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p2">
                        <div class="yz-cc-md6-p2-text">{{toiletMonitor.man_wd}}℃</div>
                        <div class="yz-cc-md6-p2-text2">温度</div>
                      </div>
                    </div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p2">
                        <div class="yz-cc-md6-p2-text">{{toiletMonitor.man_sd}}%</div>
                        <div class="yz-cc-md6-p2-text2">湿度</div>
                      </div>
                    </div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p2">
                        <div class="yz-cc-md6-p2-text">{{toiletMonitor.man_cwnd}}ppm</div>
                        <div class="yz-cc-md6-p2-text2">臭味浓度</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'厕所占用'" />
          <div class="yz-content-bg">
            <div class="yz-zz">
              <div class="yz-zz-header">
                <div class="yz-zz-header-label">总客流</div>
                <div class="yz-zz-header-text">
                  <div v-for="(item,index) in toiletUsedInfo.total">
                    <div v-if="isNumeric(item)"  class="yz-zz-header-text-bg">
                      <!-- 有背景图，然后把数字拆分  -->
                      <countTo :startVal='0' :endVal='item||0' :duration='5000'></countTo>
                    </div>
                    <div v-else>
                      {{ item }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="yz-zz-content">
                <div class="ckl">
                  <div class="ckl-item">
                    <div class="ckl-flex-between">
                      <div class="ckl-title">
                        <div class="ckl-title-p1">男厕</div>
                        <div class="ckl-title-p2">{{ (toiletUsedInfo.man_canuse) }}
                          <span class="sm1">个</span>
                          <span class="sm2">可用</span></div>
                      </div>
                      <div class="ckl-echarts" style="height: 60px;width: 60px">
                        <div ref="ckl1Ref" style="height: 60px"></div>
                      </div>
                    </div>
                    <div class="ckl-bottom">
                      <div class="ckl-bottom-key">今日客流：</div>
                      <div class="ckl-bottom-value">{{ (toiletUsedInfo.man_customer) }}次</div>
                    </div>
                  </div>
                  <div class="ckl-item">
                    <div class="ckl-flex-between">
                      <div class="ckl-title">
                        <div class="ckl-title-p1">女厕</div>
                        <div class="ckl-title-p2">{{ (toiletUsedInfo.women_canuse) }}
                          <span class="sm1">个</span>
                          <span class="sm2">可用</span>
                        </div>
                      </div>
                      <div class="ckl-echarts" style="height: 60px;width: 60px">
                        <div ref="ckl2Ref" style="height: 60px"></div>
                      </div>
                    </div>
                    <div class="ckl-bottom">
                      <div class="ckl-bottom-key">今日客流：</div>
                      <div class="ckl-bottom-value">{{ toiletUsedInfo.women_customer}}次</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <bottom-menu></bottom-menu>
  
</template>
<script setup>
import './../assets/content.css'
import './../assets/common.css'
import titleComponent from "./components/title.vue";
import { getCurrentInstance, onMounted, ref, reactive } from "vue";
import ContentTitle from "./components/contentTitle.vue";
import {CountTo} from "vue3-count-to";
import MapTraffic from "./components/mapTraffic.vue";
import black_symbol from '../assets/img/yztraffic/4.png';
import black_green from '../assets/img/yztraffic/3.png';
import black_coffic from '../assets/img/yztraffic/1.png';
import black_grey from '../assets/img/yztraffic/2.png';
import {drawLine} from "../util/chartUtil.js";
import {ajaxRequest} from "../api/code.js";
import bottomMenu from './components/bottomMenu.vue';

const chart = getCurrentInstance().proxy.$echarts
const isNumeric = function (value){
  value = parseInt(value);
  return typeof value === 'number' && !isNaN(value);
}

//ab选择
const abItems = ref([{
  name: "综合",
  selected: true
}, {
  name: "东(南)",
  selected: false
}, {
  name: "西(北)",
  selected: false
}]);


// const areaid = ref(0)
const areacode = ref(null)// 初始化地图数据

const abClick = function (selectIndex) {
  abItems.value.forEach((row, index) => {
    row.selected = (index === selectIndex);
  });
  if (selectIndex === 0) {
    // areaid.value = null
    areacode.value = null
  }
  else if (selectIndex === 1) {
    // areaid.value = 1177350;
    areacode.value = '01'
  }
  else if (selectIndex === 2) {
    // areaid.value = 1177351;
    areacode.value = '02'
  }
  //切换分区刷新数据
  refreshData()
}

// const dmyItems = ref([{
//   name: "年",
//   selected: false
// }, {
//   name: "月",
//   selected: false
// }, {
//   name: "日",
//   selected: true
// }
// ]);
// const dmyType = ref('day')
// const dmyClick = function (selectIndex) {
//   dmyItems.value.forEach((row, index) => {
//     row.selected = (index === selectIndex);
//   });
//   if (selectIndex === 0) {
//     dmyType.value = 'year'
//   }
//   else if (selectIndex === 1) {
//     dmyType.value = 'month'
//   }
//   else if (selectIndex === 2) {
//     dmyType.value = 'day'
//   }
// }

//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: 349,
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])


 getFwqxx();

const curServer = ref(null)

//地图选中服务区
const parenHandler = function (item) {
  curServer.value=['河北高速燕赵驿行集团有限公司',item.compid]
  //刷新数据
  refreshData()
}

curServer.value=['河北高速燕赵驿行集团有限公司',1190643];

//选中服务区
const serverHandleChange = (selectItem) => {
  debugger;
  console.log(selectItem);
  curServer.value = selectItem;
  refreshData();
}

const klOptions = ref({
  carFlowText: "今日客流",
  klNum: "0"
})

const fwqInfo = ref({
  ssgs: "沈海高速",
  jylx: "一般",
  bzrs: 159,
  zdmj:15615645.22,
  ld:"（G15）开阳段",
  jzmj:3852241.11,
  zh:"快236+375",
  jymj:8199.58
})

const noncfmTask = ref({
  zrw: 0,
  ywc: 0,
  wwc: 0,
  bhg: 0
})

const toiletMonitor = ref({
  women_wd: 0,
  women_sd: 0,
  women_cwnd: 0,
  man_wd: 0,
  man_sd: 0,
  man_cwnd : 0
})


/**初始化地图数据**/
const mapData = ref({
      showLabel:false,
      data : [
        {
          title: "承德东服务区（南北区）",
          lng: 118.192523,
          lag: 41.055226,
          item: 1,
          symbol: black_coffic,
          label: '拥堵'
        },
        {
          title: "丰润停车区（南北区）",
          lng: 118.190801,
          lag: 39.802433,
          item: 11234,
          symbol: black_grey,
          label: '繁忙'
        },
        {
          title: "安子岭服务区（南北区）",
          lng: 117.483534,
          lag: 40.853385,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        },
        {
          title: "滦州服务区（南北区）",
          lng: 118.413204,
          lag: 39.852281,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
        ,
        {
          title: "山海关服务区（南北区）",
          lng: 119.762079,
          lag: 40.031636,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
        ,
        {
          title: "卢龙服务区（南北区）",
          lng: 118.904135,
          lag: 39.923276,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
      ]
    }
)

//// 停车位占用
const zcwRef = ref();
const zcwNames = ref(['小车位', '大车位', '充电位', '危化品'])
const zcwColor = ref(['#00D1C8', '#23BE72', '#F9DA4F', '#7D5AFB']);
const zcwValues = ref([12, 32, 41, 10]);
const zcwKyValues = ref([1, 2, 3, 4]);
const max = ref(562);
const zcwOpts = ref({
    color: zcwColor.value,
    tooltip: {
      trigger: 'item',
      formatter: "{b} : {c} ({d}%)"
    },
    title: {
      text: '{a|' + max.value + '}\n{c|' + '总车位' + '}',
      x: '30%',
      y: 'center',
      textStyle: {
        rich: {
          a: {
            fontSize: 30,
            color: '#FFF'
          },
          c: {
            fontSize: 16,
            color: '#FFF',
            padding: [7, 0],
          },
        },
      },
    },
    series: [
      {

        type: 'pie',
        center: ['43%', '50%'],//左右 高低
        radius: ['50%', '60%'],
        label: {
          show: false,
        },
        data: [
          {
            value: zcwValues.value[0],
            name: zcwNames.value[0]
          },
          {
            value: zcwValues.value[1],
            name: zcwNames.value[1]
          },
          {
            value: zcwValues.value[2],
            name: zcwNames.value[2]
          },
          {
            value: zcwValues.value[3],
            name: zcwNames.value[3]
          }
        ],
      }
    ],
  })

const toiletUsedInfo = ref({
  total: "0",
  man_canuse: 0,
  man_canuse_ratio:0,
  man_num:0,
  man_customer: 0,
  women_canuse : 0,
  women_canuse_ratio:0,
  women_num :0,
  women_customer :0
})

//服务功能
import jiayou_icon from '../assets/img/basePanel/gn/加油1.png';
import jiaqi_icon from '../assets/img/basePanel/gn/加气1.png';
import tingche_icon from '../assets/img/basePanel/gn/停车1.png';
import shangchao_icon from '../assets/img/basePanel/gn/商超1.png';
import canyin_icon from '../assets/img/basePanel/gn/餐饮1.png'
import wsj_icon from '../assets/img/basePanel/gn/卫生间1.png'
import qx_icon from '../assets/img/basePanel/gn/汽修1.png'
import cd_icon from '../assets/img/basePanel/gn/充电1.png'
import hd_icon from '../assets/img/basePanel/gn/换电1.png'
import jq_icon from '../assets/img/basePanel/gn/加氢1.png'
import kf_icon from '../assets/img/basePanel/gn/客房1.png'
import ksj_icon from '../assets/img/basePanel/gn/开水间1.png'

import jiayou_icon2 from '../assets/img/basePanel/gn/加油2.png';
import jiaqi_icon2 from '../assets/img/basePanel/gn/加气2.png';
import tingche_icon2 from '../assets/img/basePanel/gn/停车2.png';
import shangchao_icon2 from '../assets/img/basePanel/gn/商超2.png';
import canyin_icon2 from '../assets/img/basePanel/gn/餐饮2.png'
import wsj_icon2 from '../assets/img/basePanel/gn/卫生间2.png'
import qx_icon2 from '../assets/img/basePanel/gn/汽修2.png'
import cd_icon2 from '../assets/img/basePanel/gn/充电2.png'
import hd_icon2 from '../assets/img/basePanel/gn/换电2.png'
import jq_icon2 from '../assets/img/basePanel/gn/加氢2.png'
import kf_icon2 from '../assets/img/basePanel/gn/客房2.png'
import ksj_icon2 from '../assets/img/basePanel/gn/开水间2.png'

const wwgnList = ref([{
  src: jiayou_icon,
  src2: jiaqi_icon2,
  text: '加油',
  active: true
},{
  src: jiaqi_icon,
  src2: jiaqi_icon2,
  text: '加气',
  active: true
},{
  src: tingche_icon,
  src2: tingche_icon2,
  text: '停车',
  active: false
},{
  src: shangchao_icon,
  src2: shangchao_icon2,
  text: '商超',
  active: false
},{
  src: canyin_icon,
  src2: canyin_icon2,
  text: '餐饮',
  active: false
},{
  src: wsj_icon,
  src2: wsj_icon2,
  text: '卫生间',
  active: false
},{
  src: qx_icon,
  src2: qx_icon2,
  text: '汽修',
  active: false
},{
  src: cd_icon,
  src2: cd_icon2,
  text: '充电',
  active: false
},{
  src: hd_icon,
  src2: hd_icon2,
  text: '换电',
  active: false
},{
  src: jq_icon,
  src2: jq_icon2,
  text: '加氢',
  active: false
},{
  src: kf_icon,
  src2: kf_icon2,
  text: '客房',
  active: false
},{
  src: ksj_icon,
  src2: ksj_icon2,
  text: '开水间',
  active: true
}])



// const state = reactive({
//   jrcklxx: {
//     zcl: 0,
//     zrcl: 0,
//     tbzzl: 0
//   }
// })


const ckl1Ref = ref();
//车客流
const ckl1Op = ref({
  tooltip: {
    show: false,
  },
  series: [{
    type: 'pie',
    radius: ['75%', '90%'],
    center: ['50%', '50%'],
    hoverAnimation: false,
    z: 10,
    label: {
      position: 'center',
      formatter: () => {
        return (toiletUsedInfo.value.man_canuse_ratio).toFixed(0) + "%"
      },
      rich: {
        total: {
          fontSize: 20,
          color: '#fff',
        },
      },
      color: '#0DBBB3',
      fontSize: 10,
      lineHeight: 30,
    },
    data: [{
      value: (toiletUsedInfo.value.man_canuse_ratio).toFixed(0),
      name: '1',
      itemStyle: {
        color: '#ffd302',
      },
    },
      {
        value: 100 - (toiletUsedInfo.value.man_canuse_ratio).toFixed(0),
        name: '2',
        itemStyle: {
          color: '#0DBBB3',
        },
      }
    ],
    labelLine: {
      show: false,
    },
  },
    {
      type: 'pie',
      radius: ['54%', '74%'],
      center: ['50%', '50%'],
      hoverAnimation: false,
      label: {
        show: false,
      },
      data: [{
        value: (toiletUsedInfo.value.man_canuse_ratio).toFixed(0),
        name: '1',
        itemStyle: {
          color: '#ffd302',
          opacity: 0.4,
        },
      },
        {
          value: 100 - (toiletUsedInfo.value.man_canuse_ratio).toFixed(0),
          name: '2',
          itemStyle: {
            color: '#0DBBB3',
            opacity: 0.4,
          },
        }
      ],
      labelLine: {
        show: false,
      },
    }
  ],
})

const ckl2Ref = ref();
//车客流
const ckl2Op = ref({
  tooltip: {
    show: false,
  },
  series: [{
    type: 'pie',
    radius: ['75%', '90%'],
    center: ['50%', '50%'],
    hoverAnimation: false,
    z: 10,
    label: {
      position: 'center',
      formatter: () => {
        return (toiletUsedInfo.value.women_canuse_ratio).toFixed(0) + "%"
      },
      rich: {
        total: {
          fontSize: 20,
          color: '#fff',
        },
      },
      color: '#0DBBB3',
      fontSize: 10,
      lineHeight: 30,
    },
    data: [{
      value: (toiletUsedInfo.value.women_canuse_ratio).toFixed(0),
      name: '1',
      itemStyle: {
        color: '#ffd302',
      },
    },
      {
        value: 100 - (toiletUsedInfo.value.women_canuse_ratio).toFixed(0),
        name: '2',
        itemStyle: {
          color: '#0DBBB3',
        },
      }
    ],
    labelLine: {
      show: false,
    },
  },
    {
      type: 'pie',
      radius: ['54%', '74%'],
      center: ['50%', '50%'],
      hoverAnimation: false,
      label: {
        show: false,
      },
      data: [{
        value: (toiletUsedInfo.value.women_canuse_ratio).toFixed(0),
        name: '1',
        itemStyle: {
          color: '#ffd302',
          opacity: 0.4,
        },
      },
        {
          value: 100 - (toiletUsedInfo.value.women_canuse_ratio).toFixed(0),
          name: '2',
          itemStyle: {
            color: '#0DBBB3',
            opacity: 0.4,
          },
        }
      ],
      labelLine: {
        show: false,
      },
    }
  ],
})


let  zcwChart,ckl1Chart,ckl2Chart;


onMounted(()=>{
  //停车位
  zcwChart = drawLine(zcwRef.value,zcwOpts.value);
  ckl1Chart = drawLine(ckl1Ref.value,ckl1Op.value);
  ckl2Chart = drawLine(ckl2Ref.value,ckl2Op.value);

  //刷新数据
  refreshData();
})

// 加载数据
const refreshData = () => {
  getTodayCustomer();
  getFwqBaseInfo();
  getFwqFunction();
  getTodayNonconformTask();
  getToiletMonitor();
  getParkInfo();
  getToiletUsed();
}

/**
 * 获取服务区档案信息
 */
 async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}

/**
 * 今日客流
 */
 async function getTodayCustomer() {
  debugger;
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getTodayCustomer', params);

  if (res.data) {
    klOptions.value.klNum = res.data.jrkl + "";
  }
}

/**
 * 服务区基础信息
 */
 async function getFwqBaseInfo() {
  debugger;
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getFwqBaseInfo', params);

  if (res.data) {
    fwqInfo.value.ssgs = res.data.ssgs;
    fwqInfo.value.jylx = res.data.jylx;
    fwqInfo.value.bzrs = res.data.bzrs;
    fwqInfo.value.zdmj = res.data.zdmj;
    fwqInfo.value.ld = res.data.ld;
    fwqInfo.value.jzmj = res.data.jzmj;
    fwqInfo.value.zh = res.data.zh;
    fwqInfo.value.jymj = res.data.jymj;
  }
}

/**
 * 服务功能
 */
 async function getFwqFunction() {
  debugger;
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getFwqFunction', params);

  if (res.data) {
    wwgnList .value[0].active = res.data.jy && parseInt(res.data.jy) >=1  ? true:false;
    wwgnList .value[1].active = res.data.jq && parseInt(res.data.jq) >=1 ? true:false;
    wwgnList .value[2].active = res.data.tc && parseInt(res.data.tc) >=1 ? true:false;
    wwgnList .value[3].active = res.data.sc && parseInt(res.data.sc) >=1 ? true:false;
    wwgnList .value[4].active = res.data.cy && parseInt(res.data.cy) >=1 ? true:false;
    wwgnList .value[5].active = res.data.wsj && parseInt(res.data.wsj) >=1 ? true:false;
    wwgnList .value[6].active = res.data.qx && parseInt(res.data.qx) >=1 ? true:false;
    wwgnList .value[7].active = res.data.cd && parseInt(res.data.cd) >=1 ? true:false;
    wwgnList .value[8].active = res.data.hd && parseInt(res.data.hd) >=1 ? true:false;
    wwgnList .value[8].active = res.data.jqin && parseInt(res.data.jqin) >=1 ? true:false;
    wwgnList .value[8].active = res.data.kf && parseInt(res.data.kf) >=1 ? true:false;
    wwgnList .value[8].active = res.data.ksj && parseInt(res.data.ksj) >=1? true:false;

  }
}

/**
 * 日检不合格任务
 */
 async function getTodayNonconformTask() {
  debugger;
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getTodayNonconformTask', params);

  if (res.data) {
    noncfmTask.value.zrw = res.data.zrws;
    noncfmTask.value.ywc = res.data.ywc;
    noncfmTask.value.wwc = res.data.wwc;
    noncfmTask.value.bhg = res.data.bhg;  
  }
}

/**
 * 厕所监控
 */
 async function getToiletMonitor() {
  debugger;
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getToiletMonitor', params);

  if (res.data) {
    toiletMonitor.value.women_wd = res.data.women_wd;
    toiletMonitor.value.women_sd = res.data.women_sd;
    toiletMonitor.value.women_cwnd = res.data.women_cwnd;

    toiletMonitor.value.man_wd = res.data.man_wd;
    toiletMonitor.value.man_sd = res.data.man_sd;
    toiletMonitor.value.man_cwnd = res.data.man_cwnd;    
  }
}


/**
 * 停车位占用
 */
 async function getParkInfo() {
  debugger;
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getParkInfo', params);

  if (res.data) {
    zcwOpts.value.series[0].data = [];
    zcwValues.value[0] = res.data.xcw;
    zcwKyValues.value[0] = res.data.xcwky;
    zcwOpts.value.series[0].data.push({value: zcwValues.value[0],name: zcwNames.value[0]})
    
    zcwValues.value[1] = res.data.dcw;
    zcwKyValues.value[1] = res.data.dcwky;
    zcwOpts.value.series[0].data.push({value: zcwValues.value[1],name: zcwNames.value[1]})

    zcwValues.value[2] = res.data.cdw;
    zcwKyValues.value[2] = res.data.cdwky;
    zcwOpts.value.series[0].data.push({value: zcwValues.value[2],name: zcwNames.value[2]})
    
    zcwValues.value[3] = res.data.whpcw;
    zcwKyValues.value[3] = res.data.whpcwky;
    zcwOpts.value.series[0].data.push({value: zcwValues.value[3],name: zcwNames.value[3]})
    
    max.value = res.data.zcw;
    zcwOpts.value.title.text = '{a|' + max.value + '}\n{c|' + '总车位' + '}';
    zcwChart.setOption(zcwOpts.value);   
  }
}

/**
 * 厕所占用
 */
 async function getToiletUsed() {
  debugger;
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getToiletUsed', params);

  if (res.data) {
    toiletUsedInfo.value.total = res.data.all_customer_num;
    toiletUsedInfo.value.man_canuse = res.data.man_customer_canuse;
    toiletUsedInfo.value.man_customer = res.data.man_customer_num;
    toiletUsedInfo.value.women_canuse  = res.data.women_canuse;
    toiletUsedInfo.value.women_customer  = res.data.momen_customer_num;
    toiletUsedInfo.value.man_num = res.data.man_num;
    toiletUsedInfo.value.women_num = res.data.women_num;

    toiletUsedInfo.value.man_canuse_ratio = res.data.man_canuse == 0 || res.data.man_num == 0 ? 0: (res.data.man_canuse * 100)/res.data.man_num;
    toiletUsedInfo.value.women_canuse_ratio = res.data.women_canuse == 0 || res.data.women_num == 0 ? 0: (res.data.women_canuse * 100)/res.data.women_num;

    

    ckl1Op.value.series[0].data[0].value =  (toiletUsedInfo.value.man_canuse_ratio).toFixed(0);
    ckl1Op.value.series[0].data[1].value =  100 - (toiletUsedInfo.value.man_canuse_ratio).toFixed(0);
    ckl1Chart.setOption(ckl1Op.value);

    ckl2Op.value.series[0].data[0].value =  (toiletUsedInfo.value.women_canuse_ratio).toFixed(0);
    ckl2Op.value.series[0].data[1].value =  100 - (toiletUsedInfo.value.women_canuse_ratio).toFixed(0);
    ckl2Chart.setOption(ckl2Op.value);
    debugger;
  }
}

</script>
<style scoped>
.yz-table{
  display: flex;
  flex-wrap: wrap;
  .yz-tr{
    background: url("../assets/img/basePanel/bg.png") no-repeat;
    display: flex;
    width: 100%;
    background-size: cover;
    .yz-td{
      width: 50%;
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      .yz-td-label{
        font-size: 16px;
        color: #02FFFB;
        letter-spacing: -0.28px;
        text-align: center;
        width: 100px;
      }
      .yz-td-text{

      }
    }
  }
  .bg-none{
    background: none;
  }
}
.yz-sm{
  width: 100%;
  .yz-sm-title{
    padding: 14px 0 2px 20px;
  }
  .yz-sm-md{
    display: flex;
    width: 100%;
    .yz-sm-md3{
      width: 33.333%;
      text-align: center;
      .yz-sm-md3-num{
        color: #66FFFF;
        font-size: 32px;
        padding-top: 8px;
      }
      .yz-sm-md3-text{
        padding-top: 6px;
        padding-bottom: 10px;
      }
      .yz-sm-md3-icon1{
        height: 70px;
        background: url("../assets/img/basePanel/icon1.png") no-repeat center;
      }
      .yz-sm-md3-icon2{
        background: url("../assets/img/basePanel/icon2.png") no-repeat center;
        height: 70px;
      }
      .yz-sm-md3-icon3{
        background: url("../assets/img/basePanel/icon3.png") no-repeat center;
        height: 70px;
      }
    }
  }
}

.yz-dd{
  width: 100%;
  .yz-dd-left{
    position: absolute;
    left: 12px;
  }
  .yz-dd-right{
    position: absolute;
    right: 12px;
  }
  .yz-dd-box{
    text-align: center;
    padding-top: 40px;
    .yy-dd-text{
      font-size: 18px;
      span{
        padding-left: 6px;
        font-size: 14px;
        color: white;
      }
    }
    .yy-dd-text-sm{
      font-size: 12px;
    }
  }
  .yz-dd-content{
    width: 200px;
    height: 220px;
    margin: 0 auto;
    .yz-dd-chart{
      width: 200px;
      height: 220px;
    }
  }
}

.yz-ff-lis{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 20px 0;
  .yz-ff-li{
    width: 16.66%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    .yz-ff-li-text{
      span{
        background: url("../assets/img/basePanel/gn/功能底1.png") no-repeat;
        background-size: 100% 20px;
        padding: 2px 8px;
      }
    }
    .yz-ff-li-text-no{
      cursor: not-allowed;
      span{
        background: url("../assets/img/basePanel/gn/功能底2.png") no-repeat;
        background-size: 100% 20px;
        padding: 2px 8px;
      }
    }
  }
}

.yz-cc{
  display: flex;
  width: 100%;
  .yz-cc-md6{
    width: 260px;
    .yz-cc-md6-bg{
      background: url("../assets/img/basePanel/厕所监控女.png") no-repeat center;
      height: 220px;
      display: flex;
      flex-wrap: wrap;
      .yz-cc-grid{
        width: 148px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        padding: 50px 20px 70px;
      }
      .yz-cc-grid-md6{
        width: 50%;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
      }
      .yz-cc-md6-p1{
        text-align: center;
        font-size: 20px;
      }
      .yz-cc-md6-p2-text{
        color: #66FFFF;
        font-size: 18px;
      }
      .yz-cc-md6-p2-text2{
        font-size: 10px;
      }
    }
    .yz-cc-md6-bg2{
      background: url("../assets/img/basePanel/厕所监控男.png") no-repeat center;
    }
  }
}

.ckl {
  display: flex;
  width: 100%;

  .ckl-item {
    width: 50%;
    background: url("../assets/img/headquarters/车客流框.png") no-repeat center;
    padding-left: 5vh;
    height: 136px;

    .ckl-flex-between {
      padding-left: 1vh;
      display: flex;

      .ckl-title {
        padding-right: 1vh;

        .ckl-title-p1 {
          font-size: 1.6vh;
          padding-bottom: 0.5vh;
          padding-top: 1vh;
          font-weight: bolder;
        }

        .ckl-title-p2 {
          color: #00EAFF;
          .sm1{
            font-size: 1.4vh;
          }
          .sm2{
            font-size: 1vh;
            padding-left: 5px;
            color: white;
          }
        }
      }
    }
  }

  .ckl-bottom {
    display: flex;
    margin-top: 1.6vh;
    font-size: 1.4vh;
    padding-left: 1vh;

    .ckl-bottom-value {
      color: #00EAFF;
    }
  }
}

.yz-zz{
  width: 100%;
  .yz-zz-header{
    display: flex;
    padding: 20px 40px;
    justify-content: center;
    .yz-zz-header-label{
      padding-right: 12px;
      padding-top: 4px;
    }
    .yz-zz-header-text{
      display: flex;
    }
    .yz-zz-header-text-bg{
      background: url("../assets/img/basePanel/厕所占用.png") no-repeat;
      margin: 0 3px;
      background-size: 100% 30px;
      padding: 0px 7px;
      color: #66FFFF;
      font-size: 2.8vh;
    }
  }
}

</style>